<template>
  <div class="order_item">
    <div class="order_header">
      <div class="header_o AlibabaPuHuiTi_2_55_">
        <div class="type">
          <img src="@/assets/home/football.png" style="width: 14px; height: 14px" alt="" />
          <div style="margin-left: 4px">
            {{ data.minfo.sport_type == 'soccer' ? languageJson.home.soccer : languageJson.home.basketball }}
          </div>
          <div>-</div>
          <div style="margin-left: 4px">{{ data.minfo.league_name }}</div>
        </div>
        <div style="display: flex; align-items: center">
          <img
            src="@/assets/home/xiangqing.png"
            style="width: 14px; height: 14px; cursor: pointer"
            @click="openMatchdetail()"
            alt=""
          />
          <img
            src="@/assets/home/close.png"
            style="width: 14px; height: 14px; margin-left: 12px; cursor: pointer"
            alt=""
            @click="homeStore.cancelOrder(data)"
          />
        </div>
      </div>
      <div class="name AlibabaPuHuiTi_2_55_">{{ data.minfo.home_name }} vs {{ data.minfo.away_name }}</div>
    </div>

    <div class="order_content">
      <div class="handicap">
        <div class="AlibabaPuHuiTi_2_85_">
          <!-- {{ data.pk_odds_key_ch }} -->
          {{ dialogStore.gethandicapname(data.minfo.sport_type, data.pk_odds_key) }}
          {{
            data.order_list.length == 0
              ? `@${data.min_odd.toFixed(2)}-@${data.max_odd.toFixed(2)}`
              : `${languageJson.home.comprehensive}:@${comprehensiveodd()}`
          }}
        </div>
        <div>{{ data.total_stake }}</div>
      </div>
      <div class="progress">
        <OrderProgress :data="data" />
      </div>
      <div class="status">
        <img
          v-if="data.run_status == 2"
          src="@/assets/home/done.png"
          style="width: 14px; height: 14px"
          alt=""
        />
        <img
          v-if="data.run_status == 1 && data.order_list.length > 0"
          src="@/assets/home/reservation.png"
          style="width: 14px; height: 14px"
          alt=""
        />
        <img
          v-if="data.run_status == 0 || (data.run_status == 1 && data.order_list.length == 0)"
          src="@/assets/home/clock.png"
          style="width: 14px; height: 14px"
          alt=""
        />
        <img
          v-if="data.run_status == 3"
          src="@/assets/home/cancelled.png"
          style="width: 14px; height: 14px"
          alt=""
        />
        <!-- orderstatus[data.run_status] -->
        <div style="margin-left: 4px; color: #1cc535" :style="colorlabel()">{{ labeltext() }}</div>

        <div style="margin-left: 16px; font-size: 11px; color: #666">{{ getordermodetext() }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import OrderProgress from './OrderProgress.vue'
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const props = defineProps({
  data: Object,
})
const { homeStore, homeState } = inject('HomeStore')
const { dialogStore, dialogState } = inject('DialogStore')
const orderstatus = ref({
  0: languageJson.value.home.alreadyReservation,
  1: languageJson.value.home.alreadyPlaceorder,
  2: languageJson.value.home.alreadyComplete,
  3: languageJson.value.home.alreadyCancel,
})

const overtimeList = ref([
  {
    value: -1,
    label: languageJson.value.home.continuouslyOrders,
  },
  {
    value: -2,
    label: languageJson.value.home.stopDisk,
  },
  {
    value: -3,
    label: languageJson.value.home.beforeMatch,
  },
  {
    value: -4,
    label: languageJson.value.home.duringMatch,
  },
  {
    value: -5,
    label: `${languageJson.value.home.beforeMatch} + ${languageJson.value.home.duringMatch}`,
  },
  {
    value: 5,
    label: `5s ${languageJson.value.home.stop}`,
  },
  {
    value: 10,
    label: `10s ${languageJson.value.home.stop}`,
  },
  {
    value: 20,
    label: `20s ${languageJson.value.home.stop}`,
  },
  {
    value: 30,
    label: `30s ${languageJson.value.home.stop}`,
  },
  {
    value: 60,
    label: `1min ${languageJson.value.home.stop}`,
  },
  {
    value: 120,
    label: `2min ${languageJson.value.home.stop}`,
  },
  {
    value: 300,
    label: `5min ${languageJson.value.home.stop}`,
  },
  {
    value: 600,
    label: `1min ${languageJson.value.home.stop}`,
  },
  {
    value: 900,
    label: `15min ${languageJson.value.home.stop}`,
  },
  {
    value: 1200,
    label: `20min ${languageJson.value.home.stop}`,
  },
  {
    value: 2400,
    label: `30min ${languageJson.value.home.stop}`,
  },
])

const colorlabel = () => {
  let str = ''
  if (props.data.run_status == 1 && props.data.order_list.length == 0) {
    str = 'color: #feac2e'
  } else {
    if (props.data.run_status == 0) {
      str = 'color: #feac2e'
    }
    if (props.data.run_status == 1) {
      str = 'color: #3711d8'
    }
    if (props.data.run_status == 2) {
      str = 'color: #1cc535'
    }

    if (props.data.run_status == 3) {
      str = 'color: #ff5f58'
    }
  }

  return str
}

const comprehensiveodd = () => {
  let a = '-'
  let num1 = 0
  let num2 = 0
  let num3 = 0
  props.data.order_list.forEach(item => {
    num1 += item.total_amount
    num2 += item.total_amount * item.place_odds_info
  })

  if (num1 != 0) {
    num3 = num2 / num1
    a = num3.toFixed(3)
  }
  return a
}

const labeltext = () => {
  let str = ''
  if (props.data.run_status == 1 && props.data.order_list.length == 0) {
    str = languageJson.value.home.alreadyReservation
  } else {
    str = orderstatus.value[props.data.run_status]
  }

  return str
}

const openMatchdetail = () => {
  let body = {
    bc_type: 'hga',
    ids: `${props.data.minfo.league_id}:${props.data.minfo.home_id}:${props.data.minfo.away_id}`,
    event_type: props.data.minfo.event_type,
    sport_type: props.data.minfo.sport_type

  }
  http.post('/match/match_by_ids', body).then(res => {
    if (res.data == null) {
      let langMsg = localStorage.getItem(`sp_language`) == 'zh' ? res.msg_lang.text_zh : res.msg_lang.text_en
      ElMessage({
        message: langMsg,
        type: 'warning',
      })
    } else {
      homeStore.clickmatch(res.data)
    }
  })
}

const getordermodetext = () => {
  let str = ''
  let list1 = {
    one_user: languageJson.value.home.singleAccount,
    all_user: languageJson.value.home.multipleAccounts,
    count_user: languageJson.value.home.countAccount,
  }
  let list3 = {
    0: languageJson.value.home.successively,
    1: languageJson.value.home.meanwhile,
    2: languageJson.value.home.cycle
  }
  str += list1[props.data.order_mode]
  overtimeList.value.forEach(item => {
    if (item.value == props.data.runtime) {
      str += ` / ${item.label}`
    }
  })
  str += ` / ${list3[props.data.place_mode]}`

  return str
}
</script>

<style lang="scss" scoped>
.order_item {
  height: 140px;
  background-color: #f8f9fe;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.order_header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(55, 17, 216, 0.08);
  padding-bottom: 8px;
}
.header_o {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}
.type {
  display: flex;
  align-items: center;
}
.name {
  height: 16px;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.order_content {
  flex: 1;
  margin-top: 8px;
  display: flex;
  flex-direction: column;

  .handicap {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #000;
  }

  .progress {
    width: 100%;
    height: 20px;
    margin: 8px 0;
  }

  .status {
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 17px;
  }
}
</style>